<template>
  <view class="main-view">
    <view class="temp-view" />
    <eui-task-status :status="status" :msg="msg" @clickFunc="clickFunc" />
    <eui-button title="点击" type="max2" @buttonClick="clickFunc" />
    <view class="temp-view" />
    <view v-if="status" class="popup-content">
      <view class="popup-top">

        <view class="content">
          <view class="content-title">
            <text class="main-title">工单筛选 (可多选)</text>
            <text class="tips-title">仅筛选抢单，不影响指派单</text>
          </view>
          <eui-row class="demo-eui-row">
            <eui-col v-for="(item, index) in list" :key="index" :span="8">
              <view class="demo-eui-col">
                <view v-if="localValue === item.value" class="choose-view m-button" @click="chooseOne(item)">
                  <text>{{ item.value }}</text>
                </view>
                <view v-else class="choose-view m-button-default" @click="chooseOne(item)">
                  <text>{{ item.value }}</text>
                </view>
              </view>
            </eui-col>
          </eui-row>
        </view>

        <view class="content">
          <view class="content-title">
            <text class="main-title">任务等级 (可多选)</text>
          </view>
          <eui-row class="demo-eui-row">
            <eui-col v-for="(item, index) in list2" :key="index" :span="8">
              <view class="demo-eui-col">
                <view v-if="item.checked" class="choose-view m-button" @click="chooseOne2(item)">
                  <text>{{ item.value }}</text>
                </view>
                <view v-else class="choose-view m-button-default" @click="chooseOne2(item)">
                  <text>{{ item.value }}</text>
                </view>
              </view>
            </eui-col>
          </eui-row>
        </view>

      </view>
      <view class="popup-mask" />
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      status: false,
      msg: '您已经上线8个小时，剩余工单0个！',
      localValue: '全部',
      list: [
        { value: '全部' },
        { value: '生鲜理货' },
        { value: '非生鲜理货' },
        { value: '订单验收' },
        { value: '卫生保洁' },
      ],
      list2: [
        { value: '全部', checked: false },
        { value: '初级', checked: false },
        { value: '中级', checked: false },
        { value: '高级', checked: false },
      ],
    }
  },
  methods: {
    clickFunc() {
      this.status = !this.status;
      return;
      if (this.status) {
        // 当前在线的处理
        console.log('========当前在线的处理');
        this.status = false;
      } else {
        // 当前离线的处理
        console.log('========当前离线的处理');
        this.status = true;
      }
    },
    chooseOne(e) {
      this.localValue = e.value;
    },
    chooseOne2(e) {
      let items = this.list2;
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        if (item.value === e.value) {
          item.checked = !item.checked;
          break;
        }
      }
      let newValueList = items.filter(item => item.checked === true)
          .map(item => item.value)
          .join(',');
    }
  },
}
</script>

<style lang="scss" scoped>
@import '../../packages/mobile/styles/main.scss';

.main-view {
  width: 100%;
  height: 100vh;
  background: #00aaff;
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.temp-view {
  width: 100%;
  height: 20rpx;
}
.popup-content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.popup-top {
  width: 100%;
  height: auto;
  background: #FFFFFF;
}
.popup-mask {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
}

.content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 20rpx 4rpx 20rpx;
}

.content-title {
  margin: 28rpx 8rpx 12rpx 8rpx;
  font-style: normal;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level2;
  .main-title {
    color: $uni-text-color-primary;
    font-size: $uni-font-size-level3;
    line-height: 40rpx;
  }
  .tips-title {
    color: $uni-text-color-hint;
    font-size: $uni-font-size-level7;
    margin-left: 10rpx;
  }
}

.demo-eui-col {
  height: 68rpx;
  padding: 8rpx;
  box-sizing: border-box;
  display: flex;
}

.choose-view {
  width: 100%;
  height: 100%;
  border-radius: 39rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-family: $uni-font-family;
  font-size: $uni-font-size-level4;
  line-height: 37rpx;
}

.m-button {
  font-weight: $uni-font-weight-level2;
  color: #FFFFFF;
  background: $background-common-style1;
}

.m-button-default {
  font-weight: $uni-font-weight-level1;
  color: #000000;
  background: #F9F9F8;
}

</style>
